<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <!--    <link rel="stylesheet" media="print" href="/print/_css/charge.css" />-->
    <link rel="stylesheet" href="/print/_css/charge.css" />
    <title>收费打印</title>
  </head>

  <body>
    <div class="printOrder" id="chargeApp">
      <div v-for="(it,index) in itemList" class="print-charge_box">
        <div class="print-pay_box">
          <!-- <h3 style="text-align:center;">{{hospital}}</h3> -->
          <div class="print-header-box">
            <h3 class="print_head_title_box">
              <div class="print-logo_img">
                <img class="img-logo" style="margin-top:4mm;" :src="logo" />
              </div>
              <span style="display: inline-block;width:100%;">{{hospitalName}}</span>
              <span style="font-size:6mm;">费用清单</span>
            </h3>
            <p>
              <!-- <span class="print_hospital_unit">单位：元</span> -->
            </p>
            <ul v-if="detail" class="nav_patient_menu">
              <li style="text-indent: 7mm">姓 名：{{detail.name}}</li>
              <li>
                性 别： {{detail.sex ==1?'男':(detail.sex ==2?'女':'不详')}}
              </li>
              <li>
                年 龄：<span v-if="detail.age > 17 ">{{detail.age}}岁</span>
                <span v-else>{{detail.birthday | toAge}}</span>
              </li>
              <li style="text-indent:7mm">科室：{{dept?dept:'暂无'}}</li>
              <li>医生：{{doctor?doctor:'暂无'}}</li>
              <li>档案号：{{detail.archivesCode}}</li>
              <li style="text-indent:7mm">收费日期：{{time}}</li>
              <li v-if="visitTime">消费日期：{{visitTime}}</li>
            </ul>
          </div>
          <div class="item_content">
            <table class="durg_table storage_tab">
              <tr class="table-title thead_box" style="border-top:1px dashed #101010;border-bottom:1px dashed #101010;">
                <td style="width: 5mm;"></td>
                <td style="width:30%;font-size:3mm;">项目</td>
                <td style="font-size:3mm;width:15%">原价</td>
                <td style="width:15%;font-size:3mm;">数量</td>
                <td style="font-size:3mm;">折扣</td>
                <td style="width:15%;font-size:3mm;">应收金额</td>
              </tr>
              <tr v-for="(item,index) in it.list" :class="{'active_item':item.show}" style="border-bottom: 0;" :key="index">
                <td style="width: 5mm;"></td>
                <td style="width:30%">
                  {{item.sourceName}}
                </td>
                <td style="width:15%">
                  ￥{{item.totalAmount}}
                </td>
                <td style="width:15%">
                  {{item.number}}
                </td>
                <td>
                  {{item.discount}}折
                </td>
                <td style="width:15%;">
                  ￥{{item.actualAmount}}
                </td>
              </tr>
            </table>
          </div>
          <div class="print_footer_box">
            <p style="width:25%;">收 款 人：{{memberName}}</p>
            <p>客户签字：</p>
          </div>
        </div>
        <div class="scstatistics_money-box">
          <!-- 2021 feat by jy -->
          <!-- 重写打印对齐方式，全部左对齐 -->
          <!-- css样式文件太乱了，就直接写在标签上 -->
          <div style="display: flex; justify-content: flex-end;width: 100%;font-size: 4mm">
            <div style="text-align: left;padding-right: 1mm;">
              <div>
                费用合计：
              </div>
              <div v-if="jmMoney != 0">
                折扣金额：
              </div>
              <div v-for="i in payWayList">
                {{i.title}}：
              </div>
              <div>
                实收金额：
              </div>
            </div>
            <div style="text-align: left">
              <div>
                ￥{{total}}
              </div>
              <div v-if="jmMoney != 0">
                ￥{{jmMoney}}
              </div>
              <div v-for="i in payWayList">
                ￥{{i.money}}
              </div>
              <div>
                ￥{{receivedMoney}}
              </div>
            </div>
          </div>

          <!--<p><span>费用合计:</span><span>￥{{total}}</span></p>
          <p v-if="jmMoney != 0"><span>折扣金额:</span><span>￥{{jmMoney}}</span></p>
          <p v-for="i in payWayList"><span>{{i.title}}:</span><span>￥{{i.money}}</span></p>
          <p><span>实收金额:</span><span>￥{{receivedMoney}}</span></p>-->
          <!-- <p v-if="detail.memberCard">
            <span>账户余额：</span><span>￥{{detail.account.amount}}</span>
          </p> -->
        </div>
      </div>
      <div class="print-charge_box" v-for="(it,index) in tcList">
        <div class="print-pay_box">
          <!-- <h3 style="text-align:center;">{{hospital}}</h3> -->
          <div class="print-header-box">
            <h3 class="print_head_title_box">
              <div class="print-logo_img">
                <img class="img-logo" style="margin-top:4mm;" :src="logo" />
              </div>
              <span style="display: inline-block;width:100%;">{{hospitalName}}</span>
              <span style="font-size:6mm;">套餐项目清单</span>
            </h3>
            <p>
              <!-- <span class="print_hospital_unit">单位：元</span> -->
            </p>
            <ul v-if="detail" class="nav_patient_menu">
              <li style="text-indent: 7mm">姓 名：{{detail.name}}</li>
              <li>
                性 别： {{detail.sex ==1?'男':(detail.sex ==2?'女':'不详')}}
              </li>
              <li>
                年 龄：<span v-if="detail.age > 17 ">{{detail.age}}岁</span>
                <span v-else>{{detail.birthday | toAge}}</span>
              </li>
              <li style="text-indent:7mm">科室：{{dept?dept:'暂无'}}</li>
              <li>医生：{{doctor?doctor:'暂无'}}</li>
              <li>档案号：{{detail.archivesCode}}</li>
              <li style="text-indent:7mm">收费日期：{{time}}</li>
              <li v-if="visitTime">消费日期：{{visitTime}}</li>
            </ul>
          </div>
          <div class="item_content">
            <table class="durg_table storage_tab">
              <tr class="table-title thead_box" style="border-top:1px dashed #101010;border-bottom:1px dashed #101010;">
                <td style="width: 5mm;"></td>
                <td style="width:30%;font-size:3mm;">套餐名称</td>
                <td style="font-size:3mm;width:30%">项目名称</td>
                <td style="width:15%;font-size:3mm;">价格</td>
                <td style="font-size:3mm;">数量</td>
              </tr>
              <tr v-for="(item,index) in it.list" :class="{'active_item':item.show}" style="border-bottom: 0;" :key="index">
                <td style="width: 5mm;"></td>
                <td style="width:30%">
                  {{item.tcIndex==0 ? item.packageName:''}}
                  <p v-if="item.tcIndex==0" style="display: inline-block;width: 100%;">（{{item.packageItemName}}）</p>
                </td>
                <td style="width:30%">
                  {{item.sourceName}}
                </td>
                <td style="width:15%">
                  ￥{{item.sourcePrice}}
                </td>
                <td>
                  {{item.number}}
                </td>
              </tr>
            </table>
          </div>

          <!-- <div class="print_footer_box">
            <p style="width:25%;">收 款 人：{{memberName}}</p>
            <p>客户签字：</p>
          </div> -->
        </div>
        <div class="tcstatistics_money-box">
          <p><span>实收金额：</span><span>￥{{packageActualAmount}}</span></p>
        </div>
      </div>
    </div>
    <script src="https://lib.baomitu.com/vue/2.6.10/vue.min.js"></script>
    <script src="https://lib.baomitu.com/axios/0.17.0/axios.min.js"></script>
    <script src="https://lib.baomitu.com/qs/6.5.2/qs.min.js"></script>
    <!-- <script src="/src/_js/http.js"></script> -->
    <script>
      var vm = new Vue({
        el: "#chargeApp",
        data: {
          detail: "",
          orderId: "",
          hospitalName: "",
          token: "",
          total: "",
          logo: "",
          doctor: "",
          dept: "",
          memberName: "",
          time: "",
          itemList: [],
          packageActualAmount: "",
          tcList: [],
          bill: [],
          pageSize: 14,
          jmMoney: 0,
          receivedMoney: 0,
          visitTime: "" //消费日期
        },
        filters: {
          toSex(value) {
            var str = "--";
            if (value == null) return str;
            return value == 1 ? "男" : "女";
          },
          toAge(birthday) {
            if (!birthday) return "";
            var now = new Date();
            var year = now.getFullYear();
            var month = now.getMonth() + 1;
            var day = now.getDate();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var myDate = new Date(birthday);
            var myYear = myDate.getFullYear();
            var myMonth = myDate.getMonth() + 1;
            var myDay = myDate.getDate();
            var myHour = myDate.getHours();
            var myMinute = myDate.getMinutes();
            var mySecond = myDate.getSeconds();
            var isLeapYear = function isLeapYear(year) {
              return (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
            };
            var getDaysOfMonth = function getDaysOfMonth(dateStr) {
              var date = new Date(dateStr);
              var year = date.getFullYear();
              var mouth = date.getMonth() + 1;
              var day = 0;

              if (mouth == 2) {
                day = isLeapYear(year) ? 29 : 28;
              } else if (mouth == 1 || mouth == 3 || mouth == 5 || mouth == 7 || mouth == 8 || mouth == 10 || mouth == 12) {
                day = 31;
              } else {
                day = 30;
              }
              return day;
            };
            var gapSecond = second - mySecond;
            if (gapSecond < 0) {
              minute -= 1;
              gapSecond = 60 - mySecond + second;
            }
            var gapMinute = minute - myMinute;
            if (gapMinute < 0) {
              hour -= 1;
              gapMinute = 60 - myMinute + minute;
            }
            var gapHour = hour - myHour;
            if (gapHour < 0) {
              day -= 1;
              gapHour = 24 - myHour + hour;
            }
            var gapDay = day - myDay;
            if (gapDay < 0) {
              month -= 1;
              gapDay = getDaysOfMonth(birthday) - myDay + day;
            }
            var gapMonth = month - myMonth;
            if (gapMonth < 0) {
              year -= 1;
              gapMonth = 12 - myMonth + month;
            }
            var gapYear = year - myYear;
            if (gapYear < 0) {
              gapYear = 0;
            }
            var dateStr = `${gapYear}岁${gapMonth}月${gapDay}天`;
            return dateStr;
          }
        },
        mounted() {
          var th = this;
          window.addEventListener("message", function(event) {
            var data = event.data;
            var pa = JSON.parse(data.params);
            th.itemList = [];
            th.tcList = [];
            if (data.cmd == "postJson") {
              th.$nextTick(function() {
                // 2021 feat by jy
                // 增加更多费用打印，兼容其他使用方
                th.payWayList = pa.payWayList || [];
                th.orderId = pa.orderId;
                th.hospitalName = pa.hospitalName;
                th.detail = pa.detail;
                th.jmMoney = 0;
                let obj = pa.list;
                let tcItem = pa.packageItemList;
                let disAmount = pa.disAmount || 0; //折扣
                let arr = [];
                let list = [];
                let arrs = [];
                let tclist = [];
                obj.forEach((item, index) => {
                  arr.push(item);
                  var i = index + 1;
                  if (i % th.pageSize == 0) {
                    list.push({
                      title: "费用清单",
                      list: arr
                    });
                    arr = [];
                    sellMoney = 0;
                  }
                });
                if (arr.length > 0) {
                  list.push({ list: arr });
                }
                if (tcItem && tcItem.length > 0) {
                  tcItem.forEach((obj, index) => {
                    obj.tcIndex = 0;
                    if (index > 0 && obj.packageItemName == tcItem[index - 1].packageItemName) {
                      obj.tcIndex = index;
                    }
                    arrs.push(obj);
                    var i = index + 1;
                    if (i % 18 == 0) {
                      tclist.push({
                        title: "套餐项目清单",
                        list: arrs
                      });
                      arrs = [];
                      sellMoney = 0;
                    }
                  });
                  if (arrs.length > 0) {
                    tclist.push({ list: arrs });
                  }
                  th.tcList = [...tclist];
                }
                th.itemList = [...list];
                th.receivedMoney = pa.disAmount;
                th.jmMoney = pa.jmMoney;
                th.doctor = pa.doctor;
                th.packageActualAmount = pa.packageActualAmount;
                th.dept = pa.dept;
                th.bill = pa.bill;
                th.visitTime = pa.visitTime;
                th.time = pa.endTime;
                if (th.time) {
                  th.time = th.time.substring(0, 10);
                }
                th.memberName = pa.memberName;
                th.logo = pa.logo;
                th.total = Number(pa.total).toFixed(2);
                th.token = pa.token;
                setTimeout(function() {
                  window.print();
                }, 500);
              });
            }
          });
          // this.hospital = this.adminUser.hospitalName;
          // this.getOrderItem();
        },
        methods: {
          getOrderItem() {}
        }
      });
    </script>
  </body>
</html>
